<template>
  <div class="input02">
    <label v-if="title!==''">{{title}}:</label>
    <el-input class="input02-input" :placeholder="placeholder" :disabled="disabled" v-model="val" @input="oninput" @blur="onblur" @change="onchange" clearable>
      <i v-if="icon!==''" slot="suffix" v-bind:class="[icon, 'el-input__icon']"></i>
      <template slot="append" v-if="isPrice">元</template>
    </el-input>
  </div>
</template>
<style scoped>
.input02 {
  margin: 5px 5px;
}
.input02-input {
  width: auto !important;
}
.input02 i {
  font-size: 18px;
}
.input02 >>> .el-input__inner {
  background: #ffffff;
  /* height: 32px!important; */
  width: auto !important;
  /* text-align: center; */
  width: 100% !important;
}
.input02 >>> .el-input__inner {
  height: 32px !important;
}
.input02 >>> .el-input__icon {
  line-height: 32px !important;
}
</style>
<script>
export default {
  name: 'input02',
  props: {
    title: {
      default: ''
    },
    icon: {
      default: ''
    },
    value: {
      default: ''
    },
    placeholder: {
      default: ''
    },
    disabled: {
      default: false
    },
    isPrice: {
      default: false
    }
  },
  meta: {
    descr: '数字输入框'
  },
  data() {
    return {
      val: ''
    }
  },
  methods: {
    oninput(d) {
      this.val = d.replace(/\D/g, '')
      this.$emit('input', this.val)
    },
    onchange(d) {
      this.val = d.replace(/\D/g, '')
      this.$emit('change', this.val)
      // this.$emit('input', d)
    },
    onblur(d) {
      this.$emit('blur', d)
    }
  },
  mounted() {
    this.val = this.value
  },
  watch: {
    val(value) {
      // this.$emit('input', this.val)
    },
    value() {
      this.val = this.value
    }
  }
}
</script>

